<template>
  <my-navigation-bar :my-style="style">我的</my-navigation-bar>
  <text class="icon-shezhi navbar" @tap="goFunction" :style="flag?{top: '90rpx'}:''"></text>
  <view v-if="flag">
    <view class="main-box" :style="flag?{marginTop: '180rpx'}:''">
      <view class="mask">
        <view class="avatar">
          <img src="../../static/image/person/babygirl.png" alt="">
        </view>
        <view class="profile">
          <text class="name">宝宝</text>
          <text class="time">2个月7天</text>
        </view>
        <view class="edit" @tap="goEdit">
          编辑宝宝信息
        </view>
      </view>
    </view>
    <view class="options">
      <view class="item" @tap="goFallback">
        帮助与反馈
        <text class="icon-xiangyoujiantou"></text>
      </view>
      <view class="item" @tap="goAboutus">
        关于我们
        <text class="icon-xiangyoujiantou"></text>
      </view>
      <view class="item">
        版本号
        <text class="">V1.1.0</text>
      </view>
      <view class="item">
        清理缓存0.0MB
      </view>
      <view class="item">
        退出登陆
      </view>
    </view>
  </view>
  <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
   <scroll-view scroll-y="true" class="scroll-box">
    <view class="main-box" :style="flag?{marginTop: '180rpx'}:''">
      <view class="mask">
        <view class="avatar">
          <img src="../../static/image/person/babygirl.png" alt="">
        </view>
        <view class="profile">
          <text class="name">宝宝</text>
          <text class="time">2个月7天</text>
        </view>
        <view class="edit" @tap="goEdit">
          编辑宝宝信息
        </view>
      </view>
    </view>
    <view class="options">
      <view class="item" @tap="goFallback">
        帮助与反馈
        <text class="icon-xiangyoujiantou"></text>
      </view>
      <view class="item" @tap="goAboutus">
        关于我们
        <text class="icon-xiangyoujiantou"></text>
      </view>
      <view class="item">
        版本号
        <text class="">V1.1.0</text>
      </view>
      <view class="item">
        清理缓存0.0MB
      </view>
      <view class="item">
        退出登陆
      </view>
    </view>
   </scroll-view>
 </view>
</template>

<script setup>
  import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {computed} from "vue";
  import useBounceFunc from "../../hooks/bounce.js";
  const {state, moveH, startH, endH} = useBounceFunc();
  const flag = computed(()=>{
    return getApp().globalData.isIphoneX;
  })
  const style = {
    textAlign: 'center',
    paddingLeft: 0
  };
  const goFunction = () => {
    uni.navigateTo({
      url:"/subPkgPerson/function/function"
    })
  }
  const goEdit = () => {
    uni.navigateTo({
      url: "/subPkgPerson/edit/edit"
    })
  }
  const goFallback = () => {
    uni.navigateTo({
      url: "/subPkgPerson/fallback/fallback"
    })
  }
  const goAboutus = () => {
    uni.navigateTo({
      url: "/subPkgPerson/aboutus/aboutus"
    })
  }
</script>

<style scoped lang="scss">
  @import "../../static/css/img.scss";
.navbar{
  position: fixed;
  top: 70rpx;
  left: 30rpx;
  z-index: 100;
  font-size: 48rpx;
  font-weight: 600;
  color: #515151;
}
.scroll-box{
  height: 100vh;
}
.main-box{
  margin-top: 150rpx;
  width: 100%;
  height: 470rpx;
  background-image: $person-bgimg;
  background-size: cover;
  position: relative;
  .mask{
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.5);
    
  }
  .avatar{
    position: absolute;
    top: 90rpx;
    left: 50rpx;
    width: 190rpx;
    height: 190rpx;
    background-color: #fff;
    border-radius: 50%;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .profile{
    position: absolute;
    top: 120rpx;
    left: 280rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .name{
      font-size: 46rpx;
      font-weight: 700;
    }
    .time{
      font-size: 40rpx;
      font-weight: 700;
      color: #333333;
    }
  }
  .edit{
    position: absolute;
    bottom: 20rpx;
    right: 50rpx;
    width: 230rpx;
    height: 100rpx;
    border: 3px solid #999999;
    text-align: center;
    line-height: 100rpx;
    border-radius: 50rpx;
    color: #555;
    font-weight: 700;
  }
  
}
.options{
  padding-top: 10rpx;
  padding-bottom: 180rpx;
  background-color: #F2F2F2;
  .item{
    display: flex;
    justify-content: space-between;
    padding: 50rpx 70rpx;
    background-color: #fff;
    font-size:36rpx;
    font-weight: 700;
    &:not(:first-child){
      margin-top: 20rpx;
    }
    &:active{
      background-color: #F2F2F2;
    }
    text{
      font-size: 47rpx;
      color: #8A8A8A;
    }
  }
}
</style>
